<template>
    <div>
        <div class="title">
            <img src="../assets/logo.png" />
            <span>昵称</span>
        </div>
        <div class="dh">
            <dl>
                <router-link to="/yonghu/sy1"><dd :class="`${type=='sy1'?'active':''}`">首页</dd></router-link>
                <router-link to="/yonghu/nsc/1"><dd :class="`${type=='nsc'?'active':''}`">拿手菜</dd></router-link>
                <router-link to="/yonghu/sc"><dd :class="`${type=='sc'?'active':''}`">收藏</dd></router-link>
                <router-link to="/yonghu/wd1"><dd :class="`${type=='wd1'?'active':''}`">问题</dd></router-link>
                <router-link to="/yonghu/hd"><dd :class="`${type=='hd'?'active':''}`">回答</dd></router-link>
                <router-link to="/yonghu/ly"><dd :class="`${type=='ly'?'active':''}`+' last'">留言</dd></router-link>
            </dl>
        </div>
        <div class="container">
            <div class="container1" @click="gocaipu()">
                <div class="box" v-for="k in 7" :key="k">
                    <img :src="require(`../assets/image/image${k}.png`)"/>
                    <span>菜名</span>
                    <span>100人看过 0人收藏</span>
                </div>
            
            </div>
            <div class="container2">
                <div class="box">
                    <div class="container3"><!-- v-for="(value,index) in data" :key="index" -->
                        <div class="tx">
                            <img src="../assets/logo.png" alt=""><!--src="data.img"-->
                        </div>
                        <div class="id">
                            <span>昵称</span><!--{{data.}}-->
                        </div>
                        <div class="kk">
                            <div class="a1">
                                <span class="top">10,000</span><!--{{data.bfw}}-->
                                <span class="bottom">被访问</span>
                            </div>
                            <div class="a2">
                                <span class="top">5,000</span><!--{{data.sc}}-->
                                <span class="bottom">收藏</span>
                            </div>
                        </div>
                        <div class="gz">
                            <i class="el-icon-thumb"></i>
                            <span>关注</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container4" v-show="type=='sy1'?true:false">
            <div class="title1">
                <br>
                <span>最新留言</span>
            </div>
            <div class="liuyan" v-for="index in 6" :key="index">
                <img src="../assets/logo.png">
                <div class="wz">
                    <span class="wz1">昵称</span><span class="wz2"></span><br>
                    <span class="wz3">阿巴叭叭把爱八八八八八八巴巴爸爸巴巴</span>
                </div>
            </div>
            <div class="last">
                <span>更多留言<i>>></i></span>
            </div>
        </div>
        <div class="kuang" v-show="type=='nsc'?true:false">
               <div class="ym">
                    <router-link :to="`/yonghu/nsc/${id==1?id:id-1}`"><dd :class="`from ${id==1?'active':''}`" >上一页</dd></router-link>
                    <router-link to="/yonghu/nsc/1"><dd :class="id==1?'active':''">1</dd></router-link>
                    <router-link to="/yonghu/nsc/2"><dd :class="id==2?'active':''">2</dd></router-link>
                    <router-link to="/yonghu/nsc/3"><dd :class="id==3?'active':''">3</dd></router-link>
                    <router-link to="/yonghu/nsc/4"><dd :class="id==4?'active':''">4</dd></router-link>
                    <router-link to="/yonghu/nsc/5"><dd :class="id==5?'active':''">5</dd></router-link>
                    <router-link :to="`/yonghu/nsc/${id==5?id:1+parseInt(id)}`"><dd :class="`next ${id==5?'active':''}`" >下一页</dd></router-link>
                </div>
        </div>
    </div>
</template>
<script>
    export default{
        props:["type","id"],
		data(){
			return{
				data:null,
			}
		},
        methods:{
            gocaipu(){
                this.$router.push("/details")
            }
        }
	}
</script>
<style scoped lang="scss">
    a {
    text-decoration: none;
    }
    router-link {
    text-decoration: none;
    }
    .dh{
       
        >dl{
            width: 650px;
            height: 40px;
            margin: 20px auto;
            border: 1px solid #d7d7d7;
            display: flex;
            dd{
                width: 50px;
                height: 30px;
                margin-top: 5px;
                padding-right: 10px;
                line-height: 30px;
                border: 1px solid #ffffff;
                border-right-color: #b2b2b2;
                color: rgb(0, 0, 0);
                margin-bottom: 110px;
                cursor: pointer;
                &:hover{
                    color: #fa7e3e;
                }
            }
            .active{
                color: #fa7e3e;
            }
            .last{
                    border-right-color: #ffffff;
            }
        }
    }
    .title{
			width: 50%;
			height: 150px;
            padding-left: 300px;
            margin-left: 25%;
			margin-bottom: 10px;
            >img{
                width: 100px;
                height: 100px;
                border-radius: 50%;
                display: block;
            }
			>span{
				text-align: center;
				line-height: 30px;
				font-size: 40px;
				color: #ff0000;
			}
	}
    .container{
        width: 100%;
        height: 600px;
        margin-bottom: 20px;
    }
    .container1{
        float: left;
        width: 650px;
        height: auto;
        margin-left: 300px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        >.box{
            margin:5px 5px;
            background-color: #fff;
            border: 1px solid rgb(222, 222, 222);
            &:hover{
                border: 1px solid #fa7e3e;
            }
            >img{
                display: block;
                border: 0px;
                width: 200px;
                height: 120px;
            }
            >span{
                display: block;
                margin-left: 5px;
            }
        }
    }
    .container2{
        width: 270px;
        float: left;
        margin-left: 30px;
    }
    .container3{
		border: 1px solid #c3c3c3;
		width: 199px;
		height: 200px;
		padding-top: 5px;
		margin: 5px auto;
		background-color: rgb(255, 255, 255);
		>.tx{
			width: 50px;
			height: 50px;
			margin: 5px auto;
			cursor: pointer;
			img{
				width: 50px;
				height: 50px;
				border-radius: 50%;
			}
		}
		>.id{
			width: 35px;
			height: 21px;
			margin: 5px auto;
			margin-bottom: 30px;
			>span{
				width: 100%;
			}
		}
		>.kk{
			display: flex;
			margin: 0 auto;
			>.a1{
				border: 1px solid #c3c3c3;
				border-right: currentColor;
				border-left: currentColor;
				width: 100px;
				height: auto;
				margin: 0 auto;
				>.top{
					text-align: center;
					display: block;
				}
				>.bottom{
					text-align: center;
					display: block;
					
				}
			}
			>.a2{
				border: 1px solid #c3c3c3;
				border-right: currentColor;
				width: 100px;
				height: auto;
				margin: 0 auto;
				>.top{
					text-align: center;
					display: block;
				}
				>.bottom{
					text-align: center;
					display: block;
					
				}
			}
		}
		>.gz{
			&:hover{
				cursor: pointer;
				background-color: #fa7e3e;
			}
			&:hover span{
				color: white;
			}
			&:hover i{
				color: white;
			}
			height: 46px;
			display: flex;
			justify-content: center;
			align-items: center;
			>i{
				color: #fa7e3e;
			}
			>span{
				width: 50%;
				display: block;
				text-align: center;
				color: #fa7e3e;
			}
		}
	}
    .container4{
        border: 1px solid #d0d0d0;
        width: 650px;
        height: auto;
        margin-left: 300px;
        padding-left: 20px;
        padding-right: 20px;
        background-color: rgb(255, 255, 255);
        >.title1{
            height: 60px;
            border-bottom: 2px solid #d0d0d0;
            span{
                color: #797979;
                font-size: 20px;
            }
        }
        >.liuyan{
            width: 100%;
            height: 60px;
            margin: 20px auto;
            padding-bottom: 20px;
            border-bottom: 1px solid #d0d0d0;
            img{
                display: block;
                float: left;
                width: 50px;
                height: 50px;
                margin-right: 10px;
                border-radius: 50%;
            }
            .wz3{
                display: inline-block;
                margin-top: 10px;
                color: #949494;
            }
        }
        >.last{
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: center;
            align-content: center;
            span{
                display: block;
                &:hover{
                    color: #fa7e3e;
                    cursor: pointer;
                }
            }
        }
    }
    .kuang{
		width: 500px;
		height: auto;
		margin-top: 20px;
		margin-left: 30%;
		>.ym{
			width: 570px;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
			dd{
				&:hover{
					background: white;
					color: #fa7e3e;
					border: 2px solid #ffa97e;
					cursor: pointer;
				}
				width: 40px;
				text-align: center;
				line-height: 40px;
				border-radius: 5px;
				border: 2px solid #ffa97e;
				background-color: #fa7e3e;
				margin-left: 30px;
				color: white;
				
			}
			.from{
				width: 50px;
			}
			.active{
				background: white;
				color: #fa7e3e;
				border: 2px solid #ffa97e;
				cursor: pointer;
				}
			.next{
				width: 50px;
			}
		}
	}
</style>